<template>
	<view class="shop-detail page-bg">
		<view class="banner-wrap">
			<swiper class="swiper banner-swiper" :interval="2000" :autoplay="true" :circular="true" indicator-dots indicator-color="#eeeeee" indicator-active-color="#cfa972"
			 active-class="indicator-active">
				<swiper-item v-for="item in imgList" :key='item.imgUrl'  class="banner-item">
					<image class="banner-img" :src="item.imgUrl"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="shop-info">
			<view class="shop-price" style="padding-bottom: 10px;">
				<!-- <view class="team-num">{{info.askNum}}人团</view> -->
				<view class="shop-price__l">
					<!-- <text class="price yuan">{{info.presentPrice | formatMoney}}</text>
					<text class="origin-price yuan" v-if="info.presentPrice !== info.fixedPrice">{{info.fixedPrice | formatMoney}}</text> -->
					{{info.comTitle}}
				</view>
				<view class="tpl-share">
					<image class="shop-share__icon" src="../../static/item_03.png"></image>
					<view class="shop-share__title" @click="btnShare(true)">分享</view>
				</view>
			</view>

		<!-- 	<view class="shop-info__title">{{info.comTitle}}</view> -->
			<view class="team-info__info link" @click="setIsShow(true)">
				<text class="desc">玩法</text>
				<text class="team-info__con text-overflow">{{common.stringPartOf(common.htmlToText(art.artContent), 19)}}</text>
			</view>
		</view>

		<view class="shop-spec" @click="setIsSpec(true, 1)">
			<view class="shop-spec__title">请选择规格数量</view>
			<view class="link"></view>
		</view>

		<view class="team-all" v-if="userAssList.length > 0">
			<view class="team-all__title">正在开团，可直接参与</view>
			<view class="team-all__line" v-for="item in userAssList" :key='item.id' @click.stop="link('/pages/shop/shopTeamDetailShare?id='+item.id)">
				<image class="line-img" :src="item.avatar | avatar" mode=""></image>
				<view class="line-name">{{item.nickName || '平台发起'}}</view>
				<view class="line-limit">
					<text class="limit" v-if="item.diffNum!==0">差{{item.diffNum}}人成团</text>
					<text class="limit orange" v-if="item.diffNum===0">团已满,请参加其他团</text>
					<!-- <text class="time desc">剩余{{freeTime}}</text> -->
				</view>
				<view class="btn line-btn" v-if="item.diffNum!==0" @click.stop="setIsSpec(true, 2, item.id)">立即参团</view>
				<view class="btn line-btn" v-else style="background-color: #ddd;" @click.stop="position">立即参团</view>
			</view>
		</view>

		<view class="shop-shop" v-if="info.shop">
			<image class="shop-shop__icon" :src="info.shop.shopLogo" mode=""></image>
			<view class="shop-shop__info">
				<text class="shop-shop__title">{{info.shop.shopName}}</text>
				<text class="shop-shop__desc">{{common.stringPartOf(info.shop.shopIntroduce, 18)}}</text>
			</view>
			<view class="shop-shop__view" @click="link('/pages/shop/shopIndexList?id='+info.shop.id)">进店逛逛</view>
		</view>

		<view class="shop-detail__mc shop-shop">
			商品详情
		</view>
		<view class="shop-detail__detail">
			<rich-text :nodes="info.comDetails" class="rich-text"></rich-text>
		</view>

		<view class="shop-btns">
			<view class="shop-btns__btn" @click="link('/pages/index/index')">
				<image class="shop-btns__icon" src="../../static/item_04.png" mode=""></image>
				<text class="shop-btns__title">首页</text>
			</view>
			<view class="shop-btns__btn" @click="makePhone(info.shop.servicePhone)">
				<image class="shop-btns__icon" src="../../static/item_05.png" mode=""></image>
				<text class="shop-btns__title">客服</text>
			</view>
			<!-- <view class="shop-btns__buy" @click="setIsSpec(true, 2)">
				<view class="btn btn-theme">立即参团</view>
			</view> -->
			
			<view class="shop-btns__buy" >
				<view class="shop-btns__sub shop-btns__order" @click="setIsSpec(true, 1)" style="width: 100%;">一键开团</view>
				<!-- <view class="shop-btns__sub shop-btns__cart" @click="setIsSpec(true, 2)">立即参团</view> -->
			</view>
		</view>

		<!-- 拼团规则 -->
		<popBottom :isShow='isShow' @popClose='setIsShow' :title='art.artTitle' :text='art.artContent'></popBottom>

		<!-- 立即参团 -->
		<view class="pop-wrap" v-if="opType===2" @touchmove.stop.prevent="moveHandle" :animation='animationData'>
			<view class="pop-content pop-content-spec">
				<image class="pop-close" src="../../static/common/close.png" @click="setIsSpec(false, 2)"></image>
				<view class="spec-item">
					<image class="spec-item__img" :src="selectSku.skuImg"></image>
					<view class="spec-item__info">
						<view class="spec-item__price price yuan">{{selectSku.price | formatMoney}}</view>
						<view class="spec-item__spec">{{selectSku.skuName}}</view>
					</view>
				</view>

				<scroll-view class="pop-scroll" :scroll-y="true">
					<view class="spec-type">
						<view class="spec-type__title"></view>
						<view class="spec-type__options">
							<text v-for="spec in skus" :key='spec.id' :class="selectSkuId === spec.id?'btn spec-type__option spec-type__options__active':'btn spec-type__option'"
							 @click="setSku(spec)">{{spec.skuName}}</text>
						</view>
					</view>

					<view class="spec-num">
						<view class="spec-num__title">购买数量<text class="text" style="display: none;">(限购1件)</text></view>
						<view class="spec-num__op">
							<view class="shop-num">
								<text class="op-num" @click="setNum('-')">-</text>
								<input class="num" v-model="num" type="text" />
								<text class="op-num" @click="setNum('+')">+</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<!-- 立即参团 -->
				<view class="btn spec-btn-buy" @click="onceBuy">立即参团</view>
			</view>
		</view>

		<!-- 一键开团 -->
		<view v-if="opType===1" class="pop-wrap" @touchmove.stop.prevent="moveHandle" :animation='animationData'>
			<view class="pop-content pop-content-spec">
				<image class="pop-close" src="../../static/common/close.png" @click="setIsSpec(false, 1)"></image>
				<view class="spec-item">
					<image class="spec-item__img" :src="selectSku.skuImg"></image>
					<view class="spec-item__info">
						<view class="spec-item__price price yuan">{{selectSku.price | formatMoney}}</view>
						<view class="spec-item__spec">{{selectSku.skuName}}</view>
					</view>
				</view>

				<scroll-view class="pop-scroll" :scroll-y="true">
					<view class="spec-type">
						<view class="spec-type__title"></view>
						<view class="spec-type__options">
							<text v-for="spec in skus" :key='spec.id' :class="selectSkuId === spec.id?'btn spec-type__option spec-type__options__active':'btn spec-type__option'"
							 @click="setSku(spec)">{{spec.skuName}}</text>
						</view>
					</view>

					<view class="spec-num">
						<view class="spec-num__title">拼团人数<text class="text" style="display: none;">(限购1件)</text></view>
						<view class="spec-num__op">
							<view class="shop-num">
								<text class="op-num" @click="setNum('-')">-</text>
								<input class="num" v-model="num" type="text" />
								<text class="op-num" @click="setNum('+')">+</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<!-- 一键开团 -->
				<view class="btn spec-btn-buy" @click="addAssemble">一键开团</view>
			</view>
		</view>

		<popShare :isShare='isShare' @closeShare='btnShare'></popShare>
	
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import popShare from '../../components/popShare.vue'
	import popBottom from '../../components/popBottom.vue'
	import common from '../../utils/common.js'
	// #ifdef H5
	let jweixin = require('jweixin-module')  
	// #endif
	import {
		api
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				animationData: {},
				num: 1, // 产品数量
				isSpec: false, // 参团规格弹窗
				opType: 1, // 1:一键开团，2：立即参团
				info: {},
				imgList: [],
				skus: [],
				id: '',
				defaultSku: {},
				selectSku: {},
				selectSkuId: '',
				isShow: false, // 玩法弹窗
				text: '抽奖规格介绍', // 玩法文本
				askNum: 0, // 参团人数
				isInputAskNum: false,
				freeTime: '00:00:00', // 拼团剩余时间
				
				isShare: false, // 控制分享弹窗
				userInfo: {},
				shareLink: '',
				common,
				
				userAssList: [], // 开团列表
				
				art: ''
			};
		},
		async onLoad(options) {
			this.id = options.id
			await this.getInfo()
			
			uni.removeStorageSync('shopTeamDetailId')
			
			this.getArt()
			// #ifdef H5
			 this.getJsApiParam()
			// #endif
			
			// 更新用户缓存信息
			if(this.$isLogin()) {
				this.getUserInfo()
			}
		},

		onShow() {
			this.userInfo = common.getUserInfo()
		},

		methods: {
			btnShare(status) {
				// 需要先登录
				if(this.$isLogin()) {
					// #ifdef H5
					this.isShare = status
					// #endif
					
					// #ifndef H5
					this.uniShare()
					// #endif
				}else{
					this.$login.uniLogin()
				}
			},
			
			position() {},
			
			getUserInfo () {
				api.getUserInfoAsync({ }, (res) => {
					let token = this.userInfo.token
					res.token = token
					this.userInfo = res
					common.setUserInfo(res)
				})
			},
			
			getFreeTime(info) {
				let that = this
				let date1 = new Date()
				let date2 = new Date(info.endTime)
				let lastTime = (date2 - date1) / 1000
				let d, h, m, s, timeText
				setInterval(function() {
					lastTime--
					d = parseInt(lastTime / (24 * 3600))
					h = parseInt(lastTime / 60 / 60 % 24)
					m = parseInt(lastTime / 60 % 60)
					s = parseInt(lastTime % 60)
					s = s < 10 ? '0' + s : s
					timeText = d * 24 + h + ':' + m + ':' + s
					that.freeTime = timeText
				}, 1000)
			},

			makePhone(phone) {
				this.$makePhoneCall(phone)
			},
			
			getArt() {
				api.getArtByCode({ artCode: common.artCode.ptwfjs }, res => {
					this.art = res
				})
			},

			setIsShow(status, op) {
				this.isShow = status
			},
			
			setIsSpec(status, opType, itemId) {
				if(itemId){
					common.setStorage('itemId', itemId)
				}
				this.isSpec = status
				this.num = 1
				this.opType = opType
				let animation = uni.createAnimation({
					duration: '400',
					timingFunction: 'ease-out'
				})
				if (this.isSpec) {
					this.animationData = animation.opacity(1).top(0).step().export()
				} else {
					this.animationData = animation.opacity(0).top('100%').step().export()
				}
			},

			moveHandle() {},

			link(url) {
				this.$link(url)
			},

			getInfo() {
				let that = this
				let id = that.id
				api.getAssembleDetails({ id }, (res) => {
					let temp = res.imgList
					if (res.imgList) {
						// 把白底产品图调制第一张
						res.imgList.map((item, index) => {
							if (item.isWhiteBac) {
								temp.splice(index, 1)
								temp.unshift(item)
							}
						})
					}
					// sku
					let skus = res.comSkuInfo
					// console.log(sku);
					let simpleInfo = {
						skuName: '请选择规格',
						skuImg: temp[0]['imgUrl'],
						price: res.presentPrice,
						presentPrice: '',
						stock: 0,
						id: ''
					}
					let shareLink = `${common.apiHost}m/#/pages/index/index/?sourceUserId=${that.userInfo.id}&shopTeamDetailId=${that.id}`
					this.selectSku = simpleInfo
					this.skus = skus
					this.info = res
					this.userAssList = res.userAssList || []
					this.imgList = temp
					 this.shareLink = shareLink
					this.getFreeTime(res)
					// #ifdef H5
					 this.share()
					// #endif
				})
			},
			setNum(type) {
				let num = parseInt(this.num)
				if (type === '-') {
					if (num > 1) {
						this.num = num - 1
					}
				} else {
					this.num = num + 1
				}
			},
			// 选择规格
			setSku(item) {
				this.selectSku.skuImg = this.selectSku.skuImg
				this.selectSku.skuName = '已选：' + item.skuName
				this.selectSku.price = item.price
				this.selectSku.id = item.id
				this.selectSkuId = item.id
			},

			// 立即开团
			addAssemble() {
				// #ifdef H5
				if (!this.$isLogin()) {
					this.$login.uniLogin()
					return
				} else {
					if (!this.$isBindPhone()) {
						this.$link('/pages/login/login')
						return
					}
				}
				// #endif 
				let comSupId = this.info.id
				let askNum = this.num
				if (askNum <= 4) {
					this.$showToast('开团人数最少5人~');
					return
				}
				this.setIsSpec(false)
				api.addAssemble({
					comSupId,
					askNum
				}, (res) => {
					// this.$showModal('', '开团成功, 前往查看~', () => {
					// 	this.$link('/pages/shop/shopTeamDetail?id=' + res.id)
					// })
					this.$showToast('开团成功, 赶快邀请好友来拼团吧~')
					setTimeout(() => {
						this.getInfo()
					}, 2000)
				})
			},
			// 立即参团
			onceBuy() {
				// #ifdef H5
				if (!this.$isLogin()) {
					this.$login.uniLogin()
				} else {
					if (!this.$isBindPhone()) {
						this.$link('/pages/login/login')
						return
					}
				}
				// #endif 
				let itemId = common.getStorage('itemId')
				let comSkuId = this.selectSkuId
				if(!itemId) {
					this.$showModal('参数错误,请重试~')
					return
				}
				if (!comSkuId) {
					this.$showToast('请选择规格~');
					return
				}
				this.setIsSpec(false)
				// 缓存商品信息
				let selectSku = this.selectSku
				let info = this.info
				let showInfo = {
					shopId: info.shop.shopId,
					shopName: info.shop.shopName,
					goodsId: info.id,
					// assembleId: info.assembleId,
					assembleId: itemId,
					goodsName: info.comTitle,
					goodsImg: this.imgList[0]['imgUrl'],
					goodsSkuId: comSkuId,
					goodsSkuName: selectSku.skuName,
					goodsSkuPrice: selectSku.price,
					goodsNum: this.num,
					goodsFreight: info.freight || 0
				}
				common.setStorage('userBuyGoods', showInfo)
				this.$link('/pages/mine/orderTeamConfirm')
			},
			
			getJsApiParam(callback) {
				let currentUrl = window.location.href
				uni.request({
				    url: common.apiHost + `wechat/getWxJsApiParams?curUrl=${currentUrl}` ,
				    data: { curUrl: currentUrl },
					method: 'GET',
				    success: (res) => {
				        res = res.data.result	
					   jweixin.config({
						 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						 appId: res.appId, // 必填，公众号的唯一标识
						 timestamp: res.timestamp, // 必填，生成签名的时间戳
						 nonceStr: res.nonceStr, // 必填，生成签名的随机串
						 signature: res.signature,// 必填，签名
						 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表
						 // jsApiList: 'updateAppMessageShareData,updateTimelineShareData'.split(',')
					   });
				    }
				});
			},
			
			share() {
				let that = this
				let userInfo = common.getUserInfo()
				let info = that.info
				let title = info.comTitle
				let desc = '您的好友<'+userInfo.nickName+'>邀请你一起拼团购物, 优惠多多, 实惠多多!'
				let link = common.apiHost + `m/?#/?sourceUserId=${that.userInfo.id}&shopTeamDetailId=${that.id}`
				let imgUrl = that.imgList[0]['imgUrl']
				let shareData = {
					title, // 分享标题
					desc, // 分享描述
					link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl, // 分享图标
					success: function () {
					  // 设置成功
					 // that.$showToast(`页面分享成功, 分享链接为${link}`)
					},
					cancel: function() {
					}
				}
				jweixin.ready(function () {   //需在用户可能点击分享按钮前就先调用
				  jweixin.updateAppMessageShareData(shareData)
				  jweixin.updateTimelineShareData(shareData)
				});
			},
			
			// app分享-分享给朋友
			uniShare() {
				let that = this
				let info = that.info
				let shareUrl = common.apiHost + `m/?#/?sourceUserId=${that.userInfo.id}&shopTeamDetailId=${that.id}`
				let title = info.comTitle
				let summary = '您的好友<'+userInfo.nickName+'>邀请你一起拼团购物, 优惠多多, 实惠多多!'
				let imageUrl = that.imgList[0]['imgUrl']
				common.uniShare(shareUrl, title, summary, imageUrl)
			},
			
			// app分享-分享给朋友圈
			uniShareLine() {
				let that = this
				let info = that.info
				let shareUrl = common.apiHost + `m/?#/?sourceUserId=${that.userInfo.id}&shopTeamDetailId=${that.id}`
				let title = info.comTitle
				let summary = '您的好友<'+userInfo.nickName+'>邀请你一起拼团购物, 优惠多多, 实惠多多!'
				let imageUrl = that.imgList[0]['imgUrl']
				common.uniShare(shareUrl, title, summary, imageUrl)
			}
		},
	
		components: {
			popBottom,
			popShare
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../app.less');
	.banner-wrap {
		width: 750upx;
		height: 750upx;
	}
	.banner-swiper,
	.banner-swiper,
	.banner-item,
	.banner-img {
		width: 100%;
		height: 100%;
	}
	.shop-info {
		width: 100%;
		background-color: @f;
		.content-20;
		padding-right: 0;
		padding-bottom: 0;
	}
	.shop-price {
		.flex-base;

		.team-num {
			position: unset;
			background-color: @font-orange-color;
			color: @f;
		}
	}
	.shop-price__l {
		flex-grow: 2;
		padding: 0 20rpx;
		font-size: 30upx;
		.price {
			font-weight: bold;
			font-size: @font-size-32;
			color: @theme-color;
		}

		.origin-price {
			font-weight: bold;
			font-size: @font-size-22;
			color: @font-dark-color;
			text-decoration: line-through;
			margin-left: 6upx;
		}
	}

	.tpl-share {
		background: @bg-dark-color;
		width: 100upx;
		height: 60upx;
		padding-left: 20upx;
		.flex-base;
		justify-content: flex-start;
		border-radius: 30upx 0 0 30upx;

		.shop-share__icon {
			width: 24upx;
			height: 24rpx;
		}

		.shop-share__title {
			color: #666;
			font-size: @font-size-24;
			margin-left: 10upx;
		}
	}

	.team-info__info {
		border-top: 1px solid @border-color;
		height: 80rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		width: 100%;
		.flex-base;
		.f24;

		.desc {
			.f22;
			width: 60rpx;
		}

		.team-info__con {
			flex-grow: 2;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}

	.shop-info__title {
		font-size: @font-size-32;
		margin: 20upx 0 30upx 0;
		padding-right: 20upx;
	}

	.shop-spec {
		height: 100upx;
		background-color: @f;
		padding: 0 20upx;
		box-sizing: border-box;
		.flex-base;
		margin: 20upx 0;
	}

	.team-all {
		background-color: @f;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		padding-bottom: 40rpx;

		.team-all__title {
			height: 80rpx;
			.f24;
			line-height: 80rpx;
			border-bottom: 1px solid @border-color;
		}

		.team-all__line {
			margin-top: 40rpx;
			.flex-base;

			.line-img {
				height: 50rpx;
				width: 50rpx;
				border-radius: 100%;
				flex-shrink: 0;
			}

			.line-name {
				flex-grow: 2;
				padding: 0 20rpx;
				.text-overflow;
			}

			.line-limit {
				.f24;
				flex-shrink: 0;
				width: 180rpx;
				margin-right: 20rpx;
			}

			.limit {
				width: 100%;
				display: block;
			}

			.desc {
				.f22;
				width: 100%;
				margin-top: 10rpx;
				display: block;
			}

			.line-btn {
				flex-shrink: 0;
				height: 50rpx;
				line-height: 50rpx;
				background-color: @theme-color;
				.f24;
				width: 156rpx;
				box-sizing: border-box;
			}
		}
	}

	.shop-shop {
		background-color: @f;
		padding: 20upx;
		box-sizing: border-box;
		.flex-base;
		margin-bottom: 20upx;
	}

	.shop-shop__icon {
		width: 80upx;
		height: 80upx;
		flex-shrink: 0;
		.br;
	}

	.shop-shop__info {
		margin: 0 10upx;
		flex-grow: 2;

		.shop-shop__title {
			width: 100%;
			.f24;
			display: block;
		}

		.shop-shop__desc {
			.f22;
			color: @font-dark-color;
			display: block;
		}

	}



	.shop-detail__mc {
		margin-bottom: 0;
	}

	.shop-btns {
		height: 100upx;
		border-top: 1px solid @border-color;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		background-color: @f;
		padding: 0 20upx;
		padding-left: 0;
		box-sizing: border-box;
		.flex-base;
	}

	.shop-btns__btn {
		width: 110upx;
		position: relative;
		.flex-base;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;

		.shop-btns__icon {
			width: 33upx;
			height: 33upx;
			display: block;
		}

		.shop-btns__title {
			width: 100%;
			display: block;
			text-align: center;
			font-size: @font-size-24;
			margin-top: 5upx;
		}
	}

	.shop-btns__buy {
		flex-grow: 2;
		border-radius: 80upx;
		overflow: hidden;
		.btn-theme {
			background-color: @theme-color;
			.f32;
		}
	}

	.pop-wrap {
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		top: 100%;
		.flex-base;
		align-items: flex-end;
	}
.shop-btns__buy {
		height: 80upx;
		flex-grow: 2;
		border-radius: 200upx;
		color: @f;
		.f28;
		.flex-base;
		border-radius: 40rpx;
	}

	.shop-btns__sub {
		padding: 0 10upx;
		box-sizing: border-box;
		width: 50%;
		height: 100%;
		line-height: 80upx;
		text-align: center;
		background-color: @theme-color;
	}
	
	.shop-btns__sub:first-child{
		background-color: @font-orange-color;
		border-radius: 200upx 0 0 200upx;
	}

	.shop-btns__cart {
		background-color: @theme-color;
		border-radius: 0 100upx 100upx 0;
	}	
	
	.pop-content {
		background-color: @f;
		border-radius: 10upx 10upx 0 0;
		width: 100%;
		max-height: 80%;
		position: relative;
		bottom: 0;
		padding: 20upx;
		box-sizing: border-box;
		padding-top: 30rpx;
	}

	.pop-title {
		.flex-base;

		.pop-title__t {
			flex-grow: 2;
			margin-right: 20upx;
			margin-bottom: 20upx;
		}

	}

	.pop-close {
		width: 30upx;
		height: 30upx;
		border-radius: 100%;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}

	.shop-detail {
		background-color: @bg-dark-color;
	}

	.pop-content-spec {
		display: block;
		position: relative;
		padding: 0;

		.spec-item {
			width: 100%;
			.flex-base;
			padding: 30rpx;
			box-sizing: border-box;
			.bb;
		}

		.spec-item__img {
			width: 150rpx;
			height: 150rpx;
			.br;
		}

		.spec-item__info {
			flex-grow: 2;
			padding: 0 20rpx;
			box-sizing: border-box;

			.spec-item__spec {
				.f24;
				margin-top: 20rpx;
			}
		}

		.pop-scroll {
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.spec-type {
			.bb;
			padding: 30rpx 0;

			.spec-type__title {
				.f30;
				margin-bottom: 20rpx;
			}
		}

		.spec-type__options {
			.flex-base;
			flex-wrap: wrap;
			justify-content: flex-start;
			box-sizing: border-box;
		}

		.spec-type__option {
			height: 58rpx;
			line-height: 58rpx;
			background-color: @bg-dark-color;
			.f24;
			display: inline-block;
			margin-right: 20rpx;
			margin-bottom: 10rpx;
			color: @font-base-color;
		}

		.spec-type__option:nth-of-type(5n) {
			margin-right: 0;
		}

		.spec-type__options__active {
			background-color: #fff9f2;
			border: 1px solid @font-orange-color;
			box-sizing: border-box;
			color: #cfa972;
		}

		.spec-num {
			.flex-base;
			.bb;
			height: 90rpx;

			.spec-num__title {
				.f30;

				.text {
					color: @theme-color
				}
			}

			.spec-num__op {}
		}

		.spec-btn-buy {
			margin: 30rpx auto;
			box-sizing: border-box;
			border-top: 1px solid @border-color;
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: @theme-color;
			color: @f;
			.f32;
		}
	}

	.pop-scroll {
		max-height: 60vh;
		text-align: justify;
		overflow: hidden;
	}

	.pop-wrap {
		.shop-btns__buy {
			height: 80upx;
			flex-grow: 2;
			border-radius: 200upx;
			color: @f;
			.f28;
			.flex-base;
			width: 690rpx;
			margin: 30rpx auto;
		}

		.shop-btns__sub {
			padding: 0 10rpx;
			box-sizing: border-box;
			width: 50%;
			height: 100%;
			line-height: 80upx;
			text-align: center;
		}

		.shop-btns__cart {
			background-color: @font-orange-color;
			border-radius: 200upx 0 0 200upx;
		}

		.shop-btns__order {
			background-color: @theme-color;
			border-radius: 0 200upx 200upx 0;
		}
	}
</style>
